<template>
	<view @tap="clickItem" class="flex justify-start align-start padding bg-white solid-bottom" style="width: 100%;">
		<view class="cu-avatar lg radius" :style="'background-image: url('+circle.avatar+');'"></view>
		<view class="flex justify-between align-center" style="width: 90%;">
			<view class="flex justify-between align-start padding-left" style="flex-direction: column;width: 90%;height: 100%;">
				<view class="flex justify-between align-center">
					<text class="text-lg text-bold">{{circle.name}}</text>
				</view>
				<view style="height: 16upx;"></view>
				<view class="flex justify-between align-end" style="width: 70%;">
					<view class="flex justify-start align-center">
						<text class="text-grey">{{format(circle.member_count)}}成员</text>
						<view v-if="circle.post_count>0" style="width: 40upx;"></view>
						<text v-if="circle.post_count>0" class="text-grey">{{format(circle.post_count)}}动态</text>
						<view v-if="circle.topic_count>0" style="width: 40upx;"></view>
						<text v-if="circle.topic_count>0" class="text-grey">{{format(circle.topic_count)}}话题</text>
					</view>
				</view>
			</view>
			<button style="transform: scale(0.85);min-width: 120upx;" @tap.stop="chooseAction" v-if="chooseMode" class="cu-btn bg-green radius">
				选择
			</button>
			<view v-else class="flex justify-end align-center">
				<view v-if="isCircleOwner" class="cu-tag bg-grey radius sm">我创建的</view>
				<view v-if="isCircleOwner" style="width: 10upx;"></view>
				<text class="cuIcon-right text-grey"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatCount
	} from '@/api/utils.js'
	import {
		isLogin,
		getUserInfo
	} from '@/api/auth.js'
	export default {
		name:"CircleItem",
		data() {
			return {
				userInfo:getUserInfo()
			};
		},
		computed: {
			isCircleOwner() {
				if(isLogin()==false) {
					return false
				}
				return this.circle.owner_id==this.userInfo.user_id
			}
		},
		props: {
			circle: {
				type: Object,
				default: {}
			},
			chooseMode:{
				type:Boolean,
				default:false
			},
			showJoinBtn:{
				type:Boolean,
				default:false
			}
		},
		methods: {
			format(count) 
			{
				return formatCount(count)
			},
			chooseAction() 
			{
				this.$emit('choose')
			},
			clickItem() {
				uni.navigateTo({
					url:'/pages/lessuse/circle-profile/circle-profile?circleId='+this.circle.circle_id
				})
			}
		},
	}
</script>

<style lang="scss">

</style>
